import React from 'react';
import PropTypes from 'prop-types';
import update from 'react-addons-update';
import {List, Checkbox, WhiteSpace, Progress, WingBlank} from "antd-mobile";

export default class MultiSelection extends React.Component {

  constructor(props) {
    super(props);
  }

  onChange(val, questionId) {
    let t = this;
    let options = update(t.props.options, {$apply: options => {
      return options.map(o=>{
        if (o.id === val) {
          let isSelected = o.isSelected;
          return update(o, {
            isSelected: {$set: !isSelected}
          });
        } else {
          return o;
        }
      })
    }});
    this.props.onChange(options, questionId);
  }

  render() {
    let t = this;
    return (
      <div>
        <List renderHeader={() => t.props.index + '、' + t.props.questionTitle}>
          {
            t.props.options.map(o => (
              <div>
                <Checkbox.CheckboxItem disabled={t.props.editable} checked={o.isSelected} key={o.id} onChange={() => this.onChange(o.id, t.props.questionId)}>
                  <div style={{overflow: 'auto', whiteSpace: 'normal', width: '90%'}}>{o.optionDesc}</div>
                  {
                    t.props.editable && o.hasOwnProperty('voteCount') ?
                      <List.Item.Brief>{o.voteCount+'人选择'}</List.Item.Brief>
                      :
                      null
                  }
                  {
                    t.props.editable && o.hasOwnProperty('voteCount') ?
                      <div className="show-info">
                        <div className="progress"><Progress percent={o.voteCount/t.props.totalVoteCount*100} position="normal" /></div>
                        <div>{o.voteCount/t.props.totalVoteCount*100}%</div>
                      </div>
                      :
                      null
                  }
                </Checkbox.CheckboxItem>
              </div>
            ))
          }
        </List>
      </div>
    );
  }
}

MultiSelection.propTypes = {
  index: PropTypes.number.isRequired,
  questionId: PropTypes.string.isRequired,
  questionTitle: PropTypes.string.isRequired,
  options: PropTypes.shape({
    id: PropTypes.string.isRequired,
    optionDesc: PropTypes.string.isRequired,
    isSelected: PropTypes.bool.isRequired
  }).isRequired,
  editable: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired
};
